<template>
    <div>
        <el-row style="padding: 10px 0;">
            <el-col :span="2">
                <span style="display: block; padding-top: 4px;">
                    {{ fname }}：
                </span>
            </el-col>
            <el-col :span="24 - 2 - 6">
                <!-- 单独写出来一个不限 -->
                <span class="option_span" :class="{ 'active': nowChoose.length == 0 }" @click="buxian">
                    不限
                </span>

                <!-- 循环其他条件 -->
                <span v-for="(item, index) in options" :key="index" class="option_span"
                    :class="{ 'active': nowChoose.includes(item), 'bd': type == '多选' }" @click="spanClick(item)">
                    {{ item }}
                </span>
            </el-col>
            <el-col :span="6">
                <el-button size="mini" v-if="type == '单选'" @click="duoxuanClick">
                    +多选
                </el-button>

                <el-button type="primary" size="mini" v-if="type == '多选'" @click="okClick">
                    确定
                </el-button>

                <!-- <el-button size="mini" v-if="type == '多选'" @click="danxuanClick">
                    回单选
                </el-button> -->
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props: ['options', 'fname', 'value'],
    // data只执行一次，它不能始终保持传入的value和nowChoose实时相等。
    data() {
        return {
            nowChoose: [...this.value],
            // 类型，是汉字
            type: this.value.length > 1 ? '多选' : '单选'
        }
    },
    methods: {
        // 点击了span
        spanClick(item) {
            // 看是单选还是多选
            if (this.type == '单选') {
                this.nowChoose = [item];
                // emit出去
                this.$emit('input', [item]);
            } else {
                // 多选
                // 双色球的逻辑
                // 看看点击的这项是不是在数组中
                if (this.nowChoose.includes(item)) {
                    // 删filter改map
                    this.nowChoose = this.nowChoose.filter(_item => item != _item);
                } else {
                    this.nowChoose.push(item);
                }
            }
        },
        // 点击了多选按钮
        duoxuanClick() {
            this.type = '多选';
        },
        // 点击了回单选
        danxuanClick() {
            this.type = '单选';
            this.nowChoose = [];

            // emit出去
            this.$emit('input', []);
        },
        // 点击了多选确定
        okClick() {
            // emit出去
            this.$emit('input', [...this.nowChoose]);
        },
        // 点击了不限
        buxian() {
            this.nowChoose = [];
            this.type = '单选';

            // emit出去
            this.$emit('input', []);
        }
    },
    // 当value改变（就是v-model的值，比如color、engine）
    watch: {
        // 系统会送给你变为的新值
        value(v) {
            // 当这个值变为了长度为0，就是空数组时，我们同步一下nowChoose即可。
            if (v.length == 0) {
                this.nowChoose = [];
                this.type = '单选';
            }
        }
    }
}
</script>

<style lang="less" scoped>
.option_span {
    display: inline-block;
    text-align: center;
    color: rgb(87, 126, 224);
    padding: 4px 12px;
    margin-right: 20px;
    cursor: pointer;
    border: 1px dotted transparent;
    border-radius: 4px;

    &.bd {
        border: 1px dotted rgb(186, 186, 186);
    }

    &:hover {
        color: orange;
    }

    &.active {

        color: white;
        background: #40a9fd;
    }
}
</style>